<template>
  <div class="box">
    <div class="header">
      <!-- 头部 -->
      <p>西安</p>
      <div class="ipt">
        <span class="iconfont icon-gou" id="span1"></span>|<span
          class="iconfont icon-sousuo"
        ></span>
        <p class="inputa">请输入关键词</p>
      </div>
      <button @click="toLogin">登录</button>
    </div>
    <div class="main" @scroll="scrollMe" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button> -->
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imgurl" height="140px" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <!-- 导航 -->
        <van-grid :column-num="5" :border="false" :icon-size="35" class="gride">
          <van-grid-item
            v-for="item in navList"
            :key="item.id"
            :icon="item.imgurl"
            :text="item.title"
          />
        </van-grid>
        <!-- 秒杀 -->
        <div class="top10 miaosha">
          <p class="jdms">京东秒杀</p>
          <a href="#">20点场</a>
          <!-- 倒计时 -->
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <span class="baokuan">爆款轮番秒<van-icon name="arrow" /></span>
        </div>
        <div class="top10">
          <!-- 秒杀列表 -->
          <ul class="seckill">
            <li
              v-for="item in seckillList"
              :key="item.proid"
              @click="jumpTo(item.proid)"
            >
              <van-image width="60" height="60" :src="item.img1" />
              <p class="active">￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <!-- 分页列表 -->
        <div class="top10">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'prolist2' : 'prolist1'">
              <li
                class="van-hairline--bottom"
                v-for="(item, index) in proList"
                :key="index" @click="jumpTo(item.proid)"
              >
                <img :src="item.img1" alt="" />
                <div class="jdcc">
                  <h4>
                    <div class="van-multi-ellipsis--l2">
                      <span class="jdcs">京东超市</span>
                      {{ item.proname }}
                    </div>
                  </h4>
                  <p class="price">￥{{ item.originprice }}</p>
                </div>
              </li>
              <div class="toggle" @click="isShow = !isShow">
                <van-icon name="bars" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
      </van-pull-refresh>
      <div class="top" v-if="scrollTop>700" @click="backTop"><van-icon name="back-top" /></div>
    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// import { Button } from "vant";
// Vue.use(Button);
/* 引入 */
import {getBannerList,getNavList,getSeckillList,getProList} from "../api/home";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Image as VanImage,
  Icon,
  List,
  PullRefresh,
} from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);

export default {
  name: "Home",
  components: {},
  data() {
    return {
      navList: [],
      bannerList: [],
      time: 2 * 60 * 60 * 1000,
      seckillList: [],
      proList: [],
      isShow: true,
      loading: false,
      finished: false,
      count: 2,
      isLoading: false,
      scrollTop:0,
      timer:null
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        getProList({ count: this.count, limitNum: 12 }).then((data) => {
            //this.proList=data.data.data
            this.loading = false;
            if (data.data.data.length == 0) {
              this.finished = true;
            } else {
              this.proList = [...this.proList, ...data.data.data];
              this.count++;
            }
          });
      }, 1000);
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then((data) => {
          this.proList = data.data.data;
          this.count = 2;
        });
      }, 1000);
    }, 
    scrollMe(){
      this.scrollTop=this.$refs.main.scrollTop
    },
    backTop(){
    
      this.timer=setInterval(()=>{
          if(this.$refs.main.scrollTop<=0){
          
        clearInterval(this.timer)
      }
        this.$refs.main.scrollTop-=100
      },15)
     
    },
    toLogin(){
      this.$router.push('login')
    }
  },
  created() {
   getSeckillList({ count: this.count, limitNum: 30 }).then((res) => {
        this.seckillList = res.data.data;
        console.log(this.seckillList);
      });

    getBannerList().then((data) => {
      this.bannerList = data.data;
    });
    getNavList().then((data) => {
      this.navList = data.data;
    });
  },
};
</script> 
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 0.18rem;
}
button {
  border: none;
  color: #fff;
  background: coral;
  font-size: 0.18rem;
}
.ipt {
  height: 0.3rem;
  width: 2.4rem;
  border-radius: 0.15rem;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  line-height: 0.3rem;
  display: flex;
  justify-content: space-around;
  color: #999;
  font-size: 0.28rem;
}
.inputa {
  padding-right: 0.2rem;
  border: none;
  color: #ccc;
  font-size: 0.2rem;
}
#span1 {
  color: coral;
  font-size: 0.2rem;
  font-weight: bold;
  padding-left: 0.1rem;
}
span {
  color: #999;
  font-size: 0.2rem;
  font-weight: bold;
  padding-right: 0.1rem;
}

.top10 {
  margin-top: 10px;
  background: #fff;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.seckill {
  display: flex;
  justify-content: space-between;
  align-items: center;

  overflow-x: auto;
  overflow-y: hidden;
}
.seckill::-webkit-scrollbar {
  display: none;
}
.seckill li {
  padding: 0.1rem;
}
.seckill li img {
  height: 0.5rem;
}
.active {
  color: red;
}
.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prolist1 li {
  width: 49%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 0.8rem;
}
.prolist2 li div {
  flex: 1;
}
.toggle {
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  height: 0.3rem;
  width: 0.3rem;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.3rem;
}
.miaosha {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.baokuan {
  color: red;
  font-size: 0.14rem;
}
.jdms {
  font-size: 0.16rem;
}
.miaosha a {
  color: coral;
}
.jdcs {
  display: block;
  width: 0.6rem;

  height: 0.16rem;
  line-height: 0.16rem;

  background: rgb(96, 180, 96);
  color: #fff;
  font-size: 0.12rem;
  text-align: center;
  font-weight: none;
  float: left;
}
.price {
  color: red;
  margin-top: 0.2rem;
}
.jdcc {
  padding: 0.1rem;
}
.top{
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  height: 0.3rem;
  width: 0.3rem;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.3rem;
}
</style>
